<template>
  <div class="upload-btn">
    <button @click="click">{{label}}</button>
    <input type="file" ref="_upload_input" name="file" style="display:none" @change="file_changed($event)" accept=".jpg,.jpeg,.png,.webp,.tif,.bmp">
  </div>
</template>

<script>
export default {
  props: ['label'],
  methods: {
    click() {
      this.$refs._upload_input.dispatchEvent(new MouseEvent('click'));
    },
    file_changed(evt) {
      let file = evt.target.files[0];
      if(!!!file) {
        return;
      }
      this.$emit('selected', file);
      this.$refs._upload_input.value = '';
    }
  }
}
</script>

<style scoped>
.upload-btn {
  display: inline;
}
</style>
